<template>
    <view class="container">
        <form @submit="bindSave" report-submit>
            <view class="register" @tap="toPerLogin"></view>

            <view class="login">绑定账号</view>

            <view class="inputlist">
                <view class="inputitem">
                    <view><image src="/static/imgs/icon/pwd.png"></image></view>
                    <view><input type="number" name="tel" :value="tel" placeholder="请输入手机号" style="width: 300rpx" placeholder-style="font-size:14px;" disabled /></view>
                    <button class="code" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
                </view>

                <view class="button"><button formType="submit">注册绑定</button></view>
            </view>
        </form>
    </view>
</template>

<script>
import { User } from '../../model/user-model.js';
var user = new User();
import { Token } from '../../utils/token.js';
var token = new Token();
var app = getApp();
export default {
    data() {
        return {
            flag: false,
            codeDis: false,
            phoneCode: '获取验证码',
            telephone: '',
            codePhone: '',
            loadmore: false,
            istel: '',
            tel: '',
            code: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        uni.setNavigationBarTitle({
            title: '绑定账号'
        });
        this.setData({
            loadmore: true
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this;
        token.getTokenPhoneNumFromServer((data) => {});
        this.setData({
            loadmore: true
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    onShareAppMessage() {
        return {
            title: '信息综合查询-' + uni.getStorageSync('companyinfo').name,
            path: '/weixinmao_zp/pages/register/index'
        };
    },
    methods: {
        toJobDetail: function (e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/weixinmao_zp/pages/jobdetail/index?id=' + id
            });
        },

        getPhoneNumber: function (e) {
            var that = this;
            token.getTokenPhoneNumFromServer((data) => {
                if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
                    uni.showModal({
                        title: '提示',
                        showCancel: false,
                        content: '未授权',
                        success: function (res) {}
                    });
                } else {
                    var params = {
                        iv: e.detail.iv,
                        encryptedData: e.detail.encryptedData
                    };
                    user.getPhone((data) => {
                        that.istel = true;
                        that.setData({
                            istel: that.istel,
                            tel: data.tel
                        });
                    }, params);
                }
            });
        },

        toPerLogin: function () {
            uni.navigateTo({
                url: '/pages/login/index'
            });
        },

        bindSave: function (e) {
            var that = this;
            var tel = e.detail.value.tel;
            if (tel == '') {
                uni.showModal({
                    title: '提示',
                    content: '请输入手机号',
                    showCancel: false
                });
                return;
            }
            var params = {
                tel: tel
            };
            user.Updateusertel((data) => {
                uni.navigateBack({
                    delta: 1,
                    // 返回上一级页面。
                    success: function () {
                        console.log('成功！');
                    }
                });
            }, params);
        },

        phoneinput(e) {
            console.log(e);
            let value = e.detail.value;
            console.log(value);
            this.setData({
                telephone: value
            });
        },

        changeCode() {
            var _this = this;
            let telephone = this.telephone;
            if (telephone.length != 11 || isNaN(telephone)) {
                uni.showModal({
                    title: '提示',
                    content: '请输入有效的手机号码',
                    showCancel: false
                });
                return;
            }
            this.setData({
                codeDis: true
            });
            app.globalData.util.request({
                url: 'entry/wxapp/Sendsms',
                data: {
                    phone: this.telephone
                },
                success: function (res) {
                    if (!res.data.message.errno) {
                        if (res.data.data.error == 1) {
                            _this.setData({
                                codeDis: false
                            });
                            uni.showModal({
                                title: '提示',
                                content: res.data.data.msg,
                                showCancel: false
                            });
                            return;
                        } else {
                            _this.setData({
                                phoneCode: 60,
                                code: res.data.data.code
                            });
                            let time = setInterval(() => {
                                let phoneCode = _this.phoneCode;
                                phoneCode--;
                                _this.setData({
                                    phoneCode: phoneCode
                                });
                                if (phoneCode == 0) {
                                    clearInterval(time);
                                    _this.setData({
                                        phoneCode: '获取验证码',
                                        flag: true,
                                        codeDis: false
                                    });
                                }
                            }, 1000);
                        }
                    }
                }
            });
        }
    }
};
</script>
<style>
.container {
    background-color: #fff;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.register {
    width: 700rpx;
    padding-top: 60rpx;
    padding-bottom: 30rpx;
    text-align: right;
    margin-right: 50rpx;
    color: #07b56d;
    font-size: 14px;
}

.login {
    width: 700rpx;
    font-size: 24px;
    font-weight: 600;
    margin-left: 30rpx;
}

.inputlist {
    display: flex;
    flex-direction: column;

    padding: 50rpx;
}

.inputitem {
    display: flex;
	align-items: center;
    flex-direction: row;
    border-bottom: 1rpx solid #f5f5f5;
    padding: 10rpx 0;
}
.inputitem view:nth-child(1) {
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inputitem image {
    width: 40rpx;
    height: 40rpx;
}

.inputitem input {
    width: 500rpx;
    height: 80rpx;
    margin-left: 30rpx;
}

.button {
    margin-top: 30rpx;
}

.button button {
    background: #07b56d;
    border-radius: 15rpx;
    color: #fff;
    font-size: 14px;
    height: 100rpx;
    line-height: 100rpx;
}
.code {
    width: 250rpx;
    height: 60rpx;
    background: #fff;
    color: #07b56d;
    font-size: 14px;
}

.agree {
    display: flex;
    flex-direction: row;
    color: #a2a2a2;
    font-size: 12px;
    margin-top: 50rpx;
}
button::after {
    border: 0rpx;
}
</style>
